<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ZQF</title>

    <!-- Bootstrap -->
    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="js/clock.js"></script>
    <script src="js/app.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="#" class="navbar-brand" data-toggle="modal"
   data-target="#basicModal">H5 Project</a>
        </div>
        <div class="collapse navbar-collapse navbar-right" id="navbar">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#" data-toggle="modal"
   data-target="#basicModal">Home</a></li>
            <li><a href="#about" data-toggle="modal"
   data-target="#basicModal">About</a></li>
            <li><a href="#contact" data-toggle="modal"
   data-target="#basicModal">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
    <div class="clearfix"></div>

	<div class="jumbotron">
	  <div class="container-fluid">
	  	<h1>Comming soon...</h1>
	  	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae ipsum exercitationem, numquam ea fuga nam, sapiente culpa ullam necessitatibus magnam corporis omnis! Autem deserunt debitis odit molestias, ut soluta quam.</p>
	  </div>
	</div>
    <div class="container-fluid">

    		<div class="row perspective">
    			<div class="col-md-12">
    				<div class="panel panel-primary">
    				  <div class="panel-heading">
    				  	<label>demo1</label>
    				  	<span class="glyphicon glyphicon-triangle-top pull-right"></span>
    				  </div>
    				  <div class="panel-body">
    				    <div class="col-md-3">
    				    	<div class="graphics">
    				    		<canvas width=300 height=300>
    				    			Canvas not supported!
    				    		</canvas>
    				    	</div>
    				    </div>
    				    <div class="col-md-9">
    				    	<div class="desc">
    				    		<h4>不借助3D框架，探索原生js的3d透视效果。</h4>
    				    		<p>绿色的是X轴，红色的是Y轴。该图显示了一个固定宽高为30*30的正方形,初始位置在x60,y60，通过不断调整Z轴的距离(0,100,300,500,700,900)，经过透视算法获得新的2D的坐标并且绘制。经过研究发现当正方形里我们无穷远的时候，他会消失在原点(x,y轴的交界处)
    				    		<strong>3D点对象到2D点的透视方程为 x2d = fl/(fl+dz) * x3d</strong>
    				    		</p>
    				    	</div>
    				    </div>
    				  </div>
    				  <div class="panel-footer">
    				  	<button class="btn btn-info">start</button>
    				  	<button class="btn btn-info">stop</button>
    				  </div>
    				</div>
    			</div>
    		</div>

    		<div class="row ball">
    			<div class="col-md-12">
    				<div class="panel panel-primary">
    				  <div class="panel-heading">
    				  	<label>demo1</label>
    				  	<span class="glyphicon glyphicon-triangle-top pull-right"></span>
    				  </div>
    				  <div class="panel-body">
    				    <div class="col-md-3">
    				    	<div class="graphics">
    				    		<canvas width=300 height=300>
    				    			Canvas not supported!
    				    		</canvas>
    				    	</div>
    				    </div>
    				    <div class="col-md-9">
    				    	<div class="desc">
    				    		<h4>不借助物理引擎框架和动画框架，探索加速和减速运动。<h4><p>图中显示了一个带有减速功能的小球，从左上角掉到右下角的一个过程，小球开始的速度很快，然后离边界越近时速度越慢，最终”撞“到墙壁被弹了回去。</p>
    				    		<p>实现的基本原理是需要从小球x方向和y方向分别算出速度vx,vy并且加入自己的缓动系数。小球在X方向的速度为vx=speed*Math.cos(angle),vy=speed*Math.sin(angle);缓动系数和距离墙壁的距离成反比0.05*(widith-x);</p>
    				    		<p>碰撞墙壁用了简单的模拟，即ball.x+ball.size>canvas.width则球撞到右边墙壁.</p>
    				    	</div>
    				    </div>
    				  </div>
    				  <div class="panel-footer">
    				  	<button class="btn btn-info">start</button>
    				  	<button class="btn btn-info">stop</button>
    				  </div>
    				</div>
    			</div>
    		</div>

    		<div class="row clock">
    			<div class="col-md-12">
    				<div class="panel panel-primary">
    				  <div class="panel-heading">
    				  	<label>demo1</label>
    				  	<span class="glyphicon glyphicon-triangle-top pull-right"></span>
    				  </div>
    				  <div class="panel-body">
    				    <div class="col-md-3">
    				    	<div class="clock">
    				    		<canvas width=200 height=200>
    				    			Canvas not supported!
    				    		</canvas>
    				    	</div>
    				    </div>
    				    <div class="col-md-8">
    				    	<div class="desc">
    				    		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque debitis illum perferendis blanditiis delectus quas accusamus doloremque iusto harum, aliquid rem ipsam, nulla error placeat, amet vitae ad nisi aliquam?
    				    		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque debitis illum perferendis blanditiis delectus quas accusamus doloremque iusto harum, aliquid rem ipsam, nulla error placeat, amet vitae ad nisi aliquam?
    				    		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque debitis illum perferendis blanditiis delectus quas accusamus doloremque iusto harum, aliquid rem ipsam, nulla error placeat, amet vitae ad nisi aliquam?
    				    		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque debitis illum perferendis blanditiis delectus quas accusamus doloremque iusto harum, aliquid rem ipsam, nulla error placeat, amet vitae ad nisi aliquam?
    				    		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque debitis illum perferendis blanditiis delectus quas accusamus doloremque iusto harum, aliquid rem ipsam, nulla error placeat, amet vitae ad nisi aliquam?
    				    		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque debitis illum perferendis blanditiis delectus quas accusamus doloremque iusto harum, aliquid rem ipsam, nulla error placeat, amet vitae ad nisi aliquam?

    				    	</div>
    				    </div>
    				  </div>
    				  <div class="panel-footer">
    				  	<button class="btn btn-info">start</button>
    				  	<button class="btn btn-info">stop</button>
    				  </div>
    				</div>
    			</div>
    		</div>

			<div class="row progressbar">
				<div class="col-md-12">
					<div class="panel panel-primary">
					  <div class="panel-heading">
					  	<label>demo2</label>
					  	<span class="glyphicon glyphicon-triangle-top pull-right"></span>
					  </div>
					  <div class="panel-body">
					    <div class="col-md-3">
					    	<div class="progress">
					    	  <div class="active progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
					    	    <span class="sr-only">40% Complete (success)</span>
					    	  </div>
					    	</div>
					    </div>
					    <div class="col-md-3">
					    	<div class="progress">
					    	  <div class="active progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 10%">
					    	    <span class="sr-only">10% Complete (success)</span>
					    	  </div>
					    	</div>

					    </div>
					    <div class="col-md-3">
					    	<div class="progress">
					    	  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 90%">
					    	    <span class="sr-only">90% Complete (success)</span>
					    	  </div>
					    	</div>
					    </div>
					    <div class="col-md-3">
					    	<canvas width=300 height=100 class='center-block'>
					    		Canvas not supported!
					    	</canvas>
					    </div>
					  </div>
					  <div class="panel-footer">
					  	<div class="center-block" style="width:190px;">
					  		<button class="btn btn-info">start</button>
					  		<button class="btn btn-info">stop</button>
					  	</div>
    				  </div>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-md-12">
					<div class="panel panel-primary">
					  <div class="panel-heading">
					  	<label>demo3</label>
					  	<span class="glyphicon glyphicon-triangle-top pull-right"></span>
					  </div>
					  <div class="panel-body">
					    <div class="col-md-4">
					    	<div class="list-group">
					    	  <a class="list-group-item">Cras justo odio</a>
					    	  <a class="list-group-item active">Dapibus ac facilisis in</a>
					    	  <a class="list-group-item">Morbi leo risus</a>
					    	  <a class="list-group-item">Porta ac consectetur ac</a>
					    	  <a class="list-group-item">Vestibulum at eros</a>
					    	</div>
					    </div>
					    <div class="col-md-4">
					    	<div class="list-group">
					    	  <a class="list-group-item">Cras justo odio</a>
					    	  <a class="list-group-item">Dapibus ac facilisis in</a>
					    	  <a class="list-group-item active">Morbi leo risus</a>
					    	  <a class="list-group-item">Porta ac consectetur ac</a>
					    	  <a class="list-group-item">Vestibulum at eros</a>
					    	</div>
					    </div>
					    <div class="col-md-4">
					    	<div class="list-group">
					    	  <a class="list-group-item">Cras justo odio</a>
					    	  <a class="list-group-item">Dapibus ac facilisis in</a>
					    	  <a class="list-group-item">Morbi leo risus</a>
					    	  <a class="list-group-item active">Porta ac consectetur ac</a>
					    	  <a class="list-group-item">Vestibulum at eros</a>
					    	</div>
					    </div>
					  </div>
					 
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-md-12">
					<div class="panel panel-primary">
					  <div class="panel-heading">
					  	<label>demo4</label>
					  	<span class="glyphicon glyphicon-triangle-top pull-right"></span>
					  </div>
					  <div class="panel-body">
					    	<table class="table table-striped table-hover">
					    		<thead>
					    			<tr>
					    				<th>column1</th>
					    				<th>column2</th>
					    				<th>column3</th>
					    				<th>column1</th>
					    				<th>column2</th>
					    				<th>column3</th>
					    				<th>column1</th>
					    				<th>column2</th>
					    				<th>column3</th>
					    			</tr>
					    		</thead>
					    		<tbody>
					    			<tr>
					    				<td>100.10</td>
					    				<td>500.10</td>
					    				<td>200.10</td>
					    				<td>100.10</td>
					    				<td>500.10</td>
					    				<td>200.10</td>
					    				<td>100.10</td>
					    				<td>500.10</td>
					    				<td>200.10</td>
					    			</tr>
					    			<tr>
					    				<td>100.10</td>
					    				<td>500.10</td>
					    				<td>200.10</td>
					    				<td>100.10</td>
					    				<td>500.10</td>
					    				<td>200.10</td>
					    				<td>100.10</td>
					    				<td>500.10</td>
					    				<td>200.10</td>
					    			</tr>
					    			<tr>
					    				<td>100.10</td>
					    				<td>500.10</td>
					    				<td>200.10</td>
					    				<td>100.10</td>
					    				<td>500.10</td>
					    				<td>200.10</td>
					    				<td>100.10</td>
					    				<td>500.10</td>
					    				<td>200.10</td>
					    			</tr>
					    		</tbody>
					    	</table>
					  </div>
					  
					</div>
				</div>
			</div>

			
    	</div>
    </div>

	<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Message</h4>
            </div>
            <div class="modal-body">
                <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus qui vitae, provident neque nobis possimus alias iure maiores id ad hic quae, itaque enim aut excepturi numquam optio corrupti earum.</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
        </div>
    </div>
  </div>
</div>

  </body>
</html>